<template>
  <div class="payment-tab">
    <div class="order-info">
      <Descriptions title="订单信息" :column="2" size="small">
        <DescriptionsItem label="订单号">{{ order?.orderNo }}</DescriptionsItem>
        <DescriptionsItem label="客人姓名">{{
          order?.guestName
        }}</DescriptionsItem>
        <DescriptionsItem label="房间号">{{ order?.roomNo }}</DescriptionsItem>
        <DescriptionsItem label="订单金额"
          >¥{{ order?.amount }}</DescriptionsItem
        >
        <DescriptionsItem label="押金"
          >¥{{ order?.deposit || 0 }}</DescriptionsItem
        >
        <DescriptionsItem label="消费"
          >¥{{ order?.consumption || 0 }}</DescriptionsItem
        >
      </Descriptions>
    </div>

    <Divider />

    <Form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      layout="vertical"
      @finish="handleSubmit"
    >
      <FormItem label="付款金额" name="amount">
        <InputNumber
          v-model:value="formData.amount"
          :min="0"
          :max="99999"
          :precision="2"
          style="width: 100%"
          placeholder="请输入付款金额"
        />
      </FormItem>

      <FormItem label="付款方式" name="method">
        <Select v-model:value="formData.method" placeholder="请选择付款方式">
          <SelectOption value="cash">现金</SelectOption>
          <SelectOption value="wechat">微信支付</SelectOption>
          <SelectOption value="alipay">支付宝</SelectOption>
          <SelectOption value="card">银行卡</SelectOption>
          <SelectOption value="other">其他</SelectOption>
        </Select>
      </FormItem>

      <FormItem label="付款说明" name="description">
        <Textarea
          v-model:value="formData.description"
          :rows="3"
          placeholder="请输入付款说明（可选）"
        />
      </FormItem>

      <FormItem>
        <Space>
          <Button type="primary" html-type="submit" :loading="submitting">
            确认入账
          </Button>
          <Button @click="handleCancel">取消</Button>
        </Space>
      </FormItem>
    </Form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import {
  Form,
  FormItem,
  InputNumber,
  Select,
  Textarea,
  Button,
  Space,
  Descriptions,
  DescriptionsItem,
  Divider,
  message,
} from 'ant-design-vue';
// 定义订单类型
interface NightAuditOrder {
  id: number;
  orderNo: string;
  guestName: string;
  roomNo: string;
  checkInTime: string;
  checkOutTime: string;
  status: string;
  amount: number;
  type: string;
  guestPhone?: string;
  guestIdCard?: string;
  deposit?: number;
  consumption?: number;
  paymentMethod?: string;
  remarks?: string;
}

const { SelectOption } = Select;

// Props
interface Props {
  order: NightAuditOrder | null;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  success: [];
  cancel: [];
}>();

// 响应式数据
const formRef = ref();
const submitting = ref(false);

const formData = reactive({
  amount: 0,
  method: '',
  description: '',
});

const formRules = {
  amount: [{ required: true, message: '请输入付款金额' }],
  method: [{ required: true, message: '请选择付款方式' }],
};

// 监听订单变化，自动填充金额
watch(
  () => props.order,
  (newOrder) => {
    if (newOrder) {
      formData.amount = newOrder.amount;
      formData.method = '';
      formData.description = '';
    }
  },
  { immediate: true },
);

// 方法
const handleSubmit = async () => {
  try {
    submitting.value = true;

    // 这里可以调用API进行入账
    await new Promise((resolve) => setTimeout(resolve, 1000));

    message.success('付款入账成功');
    emit('success');
  } catch (error) {
    message.error('付款入账失败');
  } finally {
    submitting.value = false;
  }
};

const handleCancel = () => {
  emit('cancel');
};
</script>

<style scoped>
.payment-tab {
  padding: 16px 0;
}

.order-info {
  margin-bottom: 16px;
}

:deep(.ant-descriptions-item-label) {
  font-weight: 500;
  color: #666;
}

:deep(.ant-form-item-label > label) {
  font-weight: 500;
}
</style>
